import React,{useEffect,useState} from 'react'
import 'antd/dist/antd.css';
import { Card,Table,Button,Popconfirm, message } from 'antd';
import '../../../style/list.css';
import {connect}from 'react-redux';
import{listApi,deleteOne,modifyOne}from '../../../server/products';
import './lists.css';
import{serverUrl} from '../../../utils/config';
import{LOAD_PRODUCT}from '../../../store/action/products';
// const dataSource=[{
//            id: 1,
//            name: '硬盘',
//            price: 700
//        }, {
//            id: 2,
//            name: '内存',
//            price: 500
//        }, {
//            id: 3,
//            name: 'CPU',
//            price: 2000
//        }, {
//            id: 4,
//            name: '显卡',
//            price: 3000
//    }]
  
function List(props) {
  console.log(props)
  // console.log('List页面的props',props);
  //删除List展示页面的一条Item

  const deleteItemData=(id)=>{
   deleteOne(id).then(res=>{
     console.log('返回删除一条Item成功的数据',res)
   //删除之后应该重新加载数据,因为删除了之后重新请求则没有了刚才删除的哪一条数据,然后重新渲染新的数据
    listApi().then(res=>{
      setDataSource(res.products);
      setTotal(res.totalCount);
    })
   }).catch(err=>{
     console.log('删除一条Item数据失败',err)
   })    
  }
  //表格的列
const columns=[{
  title:'序号',
  key:'_id',
  width:80,
  align:'center',
  render:(txt,record,index)=>index+1
},
{
title:'名字',
dataIndex:'name'
},
{
title:'价格',
dataIndex:'price'
},
{
  title:'主图',
  dataIndex:'coverImg',
  render:(txt,record,index)=>
  // console.log('主图的console.log',record)
  //console.log若请求图片成功,则会打印出record.coverImg
   record.coverImg?(<img src={serverUrl+record.coverImg} style={{width:'120px',height:'110px'}}/>):('暂无图片')

},
{
 title:'是否在售',
 dataIndex:'onSale',
 render:(text,record,index)=>record.onSale?'在售':'已下架'
},
{
title:'操作',
with:100,
render:(txt,record,index)=>{
 return(
   <>
   <Popconfirm
   title='是否要进行修改'
   onConfirm={()=>{props.history.push(`/admin/products/edit/${record._id}`)}}
   onCancel={()=>{alert('点击取消')}}>
   <Button type='primary' onClick={()=>{console.log('点击修改按钮的id号:',record)}}>修改</Button>
   </Popconfirm>
   <Popconfirm 
   title='是否要进行删除'
   onConfirm={()=>{deleteItemData(record._id)}}
   onCancel={()=>{alert('不要删除')}}>
   <Button style={{margin: 20}} type='danger'>删除</Button>
   </Popconfirm>
   <Button onClick={()=>{
     //修改上下架的状态情况
     modifyOne(record._id,{onSale:!record.onSale}).then(res=>{
       console.log('点击上下架处理的成功回调',res)
       //重新请求listApi渲染新的修改的数据
        loadData(currentPage)
     }).catch(err=>{
       console.log('点击上下架处理失败回调',err)
     })
   }}>{record.onSale?'下架':'上架'}</Button>
   </>
 )
}
}]
  //使用Hooks中的useState
  const[dataSource,setDataSource]=useState([]);
  //每条页的数据总数
  const[total,setTotal]=useState(0);
  const[currentPage,setCurrentPage]=useState(1);
  const loadData=(page,pageSize)=>{
  console.log('每次点击的页数',page)
  // console.log('每次点击的该页数的数据总数',pageSize)
  listApi(page).then(res=>{
    setDataSource(res.products)
    setTotal(res.totalCount)
    setCurrentPage(page)
    console.log('点击分页效果展示的效果',res)
  })
  }
  
  useEffect(()=>{
    
// ------------------------------------------------------------------------
  //  console.log('PRODUCT_LOADED',LOAD_PRODUCT())
  //  props.dispatch(LOAD_PRODUCT({page:2}))
  // props.dispatch(
  //   LOAD_PRODUCT({
  //     page:2,
  //     // name:'沙田ME'
  //   })
  // ) 
  //  console.log('查看一下action中的products里面有没有list',props)
// ----------------------------------------------------------------------------------
   props.dispatch(
    LOAD_PRODUCT({
      page:2,
      // name:'和胜和'
    })
   )  
// -----------------------------------------------------------------------------------
     listApi().then(res=>{
      console.log('listApi请求出来的数据kkkkkk',res)
       setDataSource(res.products)
       setTotal(res.totalCount);
      })
  },[])
    return (
    <>
    <Card title="商品列表"  extra={<Button onClick={()=>{props.history.push('/admin/products/edit')}} type="primary">新增</Button>}>
    <Table
     className="car" 
     pagination={{total:total,defaultPageSize:3,onChange:loadData}} 
     rowKey="_id" style={{textAlign:'center'}} 
     columns={columns}
     dataSource={dataSource}
     rowClassName={record=>record.onSale?"":"bg-red"}/>  
    </Card>    
        
        
    </>
    )
}

// export default List;
// ReactDOM.render(<Table columns={columns} dataSource={data} />, mountNode);
export default connect(state=>state)(List);
// export default connect(state=>state.products)(List);
